<template>
    <div class="userList">
        <div class="header">
            <el-row>
                <el-col :span="22">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>职位列表</el-breadcrumb-item>
                    </el-breadcrumb>

                </el-col>
                <el-col :span="2">
                    <el-button type="success" size="mini" @click="addUser">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                height="69vh"
                :data="jobtitle"
                stripe
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                   >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="职位名称"
                    >
            </el-table-column>
            <el-table-column
                    width="200"
                    label="操作">
                <template slot="header">
                    <el-input

                            size="mini"
                            @input="getSearch"
                            v-model="search"
                            prefix-icon="el-icon-search"
                            placeholder="请输入材料"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="upd(scope.row)">分配权限</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" >
            <el-form :model="addUserFrom" :rules="rules" ref="from" label-width="100px">
<!--                <el-form-item label="分类编码:" prop="classifyCode">-->
<!--                    <el-input v-model="addUserFrom.classifyCode" autocomplete="off" :disabled="addUserFrom.update"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="职位名称:" prop="name">
                    <el-input v-model="addUserFrom.name"
                              autocomplete="off">

                    </el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>



<!--        分配权限-->


        <el-dialog title="分配权限" :visible.sync="role" >
            <el-form :model="roleForm"  label-width="100px">
                <!--                <el-form-item label="分类编码:" prop="classifyCode">-->
                <!--                    <el-input v-model="addUserFrom.classifyCode" autocomplete="off" :disabled="addUserFrom.update"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item label="职位ID:">
                    <el-input v-model="roleForm.id"
                              disabled
                             >

                    </el-input>
                </el-form-item>
                <el-form-item label="职位名称:">
                    <el-input v-model="roleForm.name"
                              >

                    </el-input>
                </el-form-item>
                <el-form-item label="分配权限">
                    <el-select v-model="roleForm.code" multiple placeholder="请选择">
                        <el-option
                                v-for="item in projectClassify"
                                :key="item.projectClassifyCode"
                                :label="item.projectClassifyName"
                                :value="item.projectClassifyCode">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updatecancel">取 消</el-button>
                <el-button type="primary" @click="updateRole()">确 定</el-button>
            </div>
        </el-dialog>

        <el-pagination
                v-if="paginationShow"
                :pager-count="11"
                layout="prev, pager, next"
                @current-change="pageNum"
                :total="totalSize">
        </el-pagination>
    </div>
</template>

<script>
    import {addJobTitle,addJobTitleRule,getJobTitle,updatejobTitle,queryJobtitleProjectClassIfy,queryProjectClassify} from "../../network/job";

    export default {
        name: "index",
        data(){
            return {
                paginationShow:true,
                role:false,
                roleForm:{
                    name:'',
                    id:'',
                    code:""
                },
                projectClassify:[],
                search:'',
                dialogFormVisible:false,
                disabled:false,
                title:"新增分类",
                rules: {
                    name:[
                        { required: true, message: '请输入职位名称', trigger: 'blur' },
                    ],
                    classifyCode:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ]
                },

                addUserFrom:{
                    classifyCode:"",
                    name:"",
                    update:false
                },
                defaddUserFrom:{
                    name:"",
                    pass:"",
                    update:false
                },
                totalSize:0,
                data:{
                    pageNum:1,
                    pageSize:10
                },
                jobtitle:[],
                currentJobtitleRole:[]
            }
        },
        created() {
            this.getJobTitle()
            this.getProjectClassifyList()
        },
        methods:{

            getSearch(){
                this.data.pageNum=1
                this.data.searchVal=this.search
                this.getJobTitle()
            },
            pageNum(e){
                console.log(e)
                this.data.pageNum=e
                this.data.searchVal=''
                this.getJobTitle()

            },
            async getProjectClassifyList(){
                let status = await queryProjectClassify()
                if(status.code==200){
                    this.projectClassify=status.data.content
                    console.log(this.projectClassify)
                }else {
                    this.$message.error(status.msg)
                }
            },
            async queryJobtitleCode(data){
                console.log(data)
                let v=await queryJobtitleProjectClassIfy(data)
                if(v.code==200){
                      let data = v.data.content
                    if(data.length==0){
                        this.roleForm.code=[]
                        return
                    }
                        data.forEach(item=>[
                            this.roleForm.code.push(item.projectClassifyCode)
                        ])
                }else{
                    this.$message.error(v.msg)
                }
            },
            async getJobTitle(){
                let status = await getJobTitle(this.data)
                if(status.code==200){
                    this.jobtitle=status.data.content
                    this.totalSize=status.data.totalSize

                }else{
                    this.$error(status.msg)
                }
            },
            updatecancel(){
                this.role=false
            },
            updateRole(){
                let data ={
                    classifyCodes:this.roleForm.code,
                    positionCode:this.roleForm.id,
                    positionName:this.roleForm.name
                }
                addJobTitleRule(data).then(v=>{
                    if(v.code==200){
                        this.$message.success('权限更新成功！')
                        this.getJobTitle()
                        this.role=false
                    }else{
                        this.$message.error(v.msg)
                    }
                })
            },
            upd(row){
                this.roleForm.code=[]
                this.roleForm.name=row.name
                this.roleForm.id=row.code
                    this.role=true
                    //
                    // this.roleForm=row.name
                    // this.roleForm.id=row.id
                    let data = {
                        positionCode:row.code

                    }

                    this.queryJobtitleCode(data)

             },
            del(){
                this.$message.error('暂时未开放！')
                return
                // this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // }).then(async () => {
                //     let data={
                //         classifyCode:row.classifyCode
                //     }
                //     let status = await delMaterialClassify(data)
                //     if(status.code==200){
                //         this.$success('成功删除!')
                //         this.getlistMaterialClassify()
                //     }
                //     else{
                //         this.$success(status.msg)
                //     }
                //
                //
                // }).catch(() => {
                //     this.$message({
                //         type: 'info',
                //         message: '已取消删除'
                //     });
                // });

            },
            addUser(){
                this.dialogFormVisible=true
            },
            cancel(){
                this.dialogFormVisible=false
                this.addUserFrom=Object.assign({},this.defaddUserFrom)
            },
            confirm(){

                this.$refs.from.validate(async v=>{
                    if(!v)return
                    if(!this.addUserFrom.update){
                        let data ={
                            name:this.addUserFrom.name,
                            classifyCode:this.addUserFrom.classifyCode
                        }
                        let status = await addJobTitle(data)
                        if(status.code==200){
                            this.$success("添加职位成功！")
                            this.dialogFormVisible=false
                            this.getJobTitle()
                        }else {
                            this.$error(status.msg)
                        }
                    }
                    else{
                        this.$message.error('功能暂时未开放 ！')

                        let status=await updatejobTitle(this.addUserFrom)
                        if(status.code==200){
                            this.$success("修改成功")
                            this.getJobTitle()

                        }else{
                            this.$error(status.msg)
                        }

                    }
                })
                this.addUserFrom=Object.assign({},this.defaddUserFrom)
            }
        }
    }
</script>

<style scoped lang="sass">
    .header
        margin-bottom: 20px
        .el-select
            width: 100%
        ::v-deep .el-dialog
            width: 30%
            border-radius: 5px

</style>